<template>
  <div class="student">
  	<el-row>
  		<el-col :span='5' class="function-list" id="function-list">
  			<div class="mytitle"> Functions</div>
  			<ul>
		      	<li>
		      		<el-button type="primary" size="large" icon="upload" @click="openUploadExcel()"></el-button>
			 	</li>
		      	<li>
		      		<el-button type="primary" size="large" icon="menu" @click="opentStudentList()"></el-button>

		      	</li>
		    </ul>
  		</el-col>

  		<el-col :span='19' class="detail">
    		<div class="mytitle">Detail</div>
    		<div v-if="isUpload">
    			<uploadExcel></uploadExcel>
    		</div>
    		
    		<div v-if="isStudentList">
    			<studentList></studentList>
    		</div>
  		</el-col>
  	</el-row>

  </div>
</template>

<script>
import uploadExcel from '@/components/common/uploadExcel'
import studentList from '@/components/common/studentList'
export default {

  name: 'student',
  data(){
  	return {
  		isUpload:true,
  		isStudentList:false

  	}
  },
  components:{
  		uploadExcel,
  		studentList
  },
  methods:{
  	openUploadExcel:function(){
  		this.isStudentList=false;
  		this.isUpload=true;
  	},
  	opentStudentList:function(){
  		this.isUpload=false;
  		this.isStudentList=true;
  	}
  },
  mounted:function(){
  	var functionHeight=document.body.clientHeight;
  	console.log(functionHeight);
  	document.getElementById('function-list').style.height=functionHeight+'px';
  },

  
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.function-list{
		background-color: #F9FAFC;
		border-right: 1px solid #C0CCDA;

	}
	
	.function-list ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
 		line-height: 3em;

	}

	.function-list li {
		/*float:left;*/
		display: block; 
		text-align: left;
  		/*display: inline-block;*/
  		margin: 0 10px;
	    /*border-bottom:solid 1px #ccc; */
	}

	.function-list li a{
		text-decoration: none;
	}

	
	.mytitle{
	/*height: 20px;*/
	border-bottom: 1px solid #D3DCE6;
	background-color: #F9FAFC;
	padding: 10px;
}
</style>
